<template>
  <!-- 点到点任务最大盒子 -->
  <div class="Thirly">
    <!-- 选择起点结构 -->
    <div class="downList">
      <!-- 下拉菜单 -->
      <div class="origin">
        <van-dropdown-menu :overlay="false">
          <van-icon name="location-o" color="#1ed100" size="32"
            ><span>{{
              value1 === "" ? "选择起点列" : newonetext
            }}</span></van-icon
          >
          <van-dropdown-item
            @change="oneadd"
            v-model="value1"
            :options="lineList"
          />
        </van-dropdown-menu>
      </div>
      <div class="outcome">
        <van-dropdown-menu :overlay="false">
          <van-icon name="location-o" color="#ff6317" size="32"
            ><span>{{
              value2 === "" ? "选择终点列" : newtwotext
            }}</span></van-icon
          >
          <van-dropdown-item
            @change="twoadd"
            v-model="value2"
            :options="lineList"
          />
        </van-dropdown-menu>
      </div>
      <van-checkbox id="ads" v-model="checked">返回待命点</van-checkbox>
    </div>
    <!-- 执行按钮区域 -->
    <div class="button">
      <van-button :loading="loading" @click="carryout">执行</van-button>
    </div>
  </div>
</template>

<script>
//导入获取列列表数据接口
import { parseApi } from "@/api/location";
//导入下发任务接口请求
import { issueApi } from "@/api/assignment";
//导入yaml格式进行数据转换
import yaml from "js-yaml";
// 导入mock模拟数据
import { paramsList } from "@/api/mock";
//导入获取库位点的接口请求
import { gainApi } from "@/api/record";
export default {
  name: "Son",
  // 接收父组件中传入的值
  props: ["Thirdly", "newItem", "newIndex","lineListd"],
  data() {
    return {
      checked:false,
      loading: false, //控制加载状态的显示和隐藏
      newtwotext: "", //用来保存终点数据id
      newonetext: "", //用来保存起点数据id
      // onetext: "选择起点", //默认给起点下拉框的标题
      // twotext: "选择终点", //默认给终点下拉宽的标题
      value1: "", //选中的下标起点状态
      value2: "", //选中的下标终点状态
      paramsList: paramsList, //使用mock模拟数据
      lineList: [], //用来保存库位列表信息
    };
  },
  methods: {
    //---------------------------------------点击修改起点数据
    oneadd(e) {
      // 使用方法进行筛选
      let res = this.lineList.filter((item) => {
        return item.value == e; //把点击的哪一项的下标判断返回数据
      });
      //把第0项数据的text赋值给定义的变量
      this.newonetext = res[0].text;
    },
    //------------------------------------- 点击修改终点数据
    twoadd(e) {
      // 使用方法进行筛选
      let res = this.lineList.filter((item) => {
        return item.value == e; //把点击的哪一项的下标判断返回数据
      });
      //把第0项数据的text赋值给定义的变量
      this.newtwotext = res[0].text;
    },
    //-------------------------------------点击执行按钮提交数据到后台
    carryout() {
      if (this.newonetext == "") {
        this.$toast.fail("请选择起点列");
        return;
      } else if (this.newtwotext == "") {
        this.$toast.fail("请选择终点列");
        return;
      } else if (this.newonetext == this.newtwotext) {
        this.$toast.fail("终点与起点不能相同");
        return;
      }
      let datas = 0;
      if(this.checked==false){
        datas = 0;
      }else{
        datas = 1;
      }
      this.loading = true; //把加载动画改为显示
      setTimeout(async () => {
        // 捕获错误
        try {
          //设置计时器
          let res = await issueApi({
            back_standby_point: datas, //是否返回待命点
            task_type: this.newIndex, //任务类型为父组件传过来的下标
            start_point_id: 0, //起点id位置
            end_point_id: 0, //终点id位置
            start_column_id: this.newonetext, //列到列起点id
            end_column_id: this.newtwotext, //列到列终点id
          });
          this.$toast.success("执行成功"); //提示用户
        } catch {
          this.$toast.fail("执行失败!!!"); //提示用户
        }
        this.loading = false; //把加载状态改为隐藏
        //清空数据
        this.value1 = "";
        //清空数据
        this.value2 = "";
      }, 1500);
    },
    //--------------------------------------------获取库位点数据
    async getgino() {
      // 发送请求
      // let res = await parseApi();
      // //把数据转换成yaml格式
      // let newres = yaml.load(res.data);
      let newres = this.lineListd;
      //使用map进行映射修改id的键为text
      this.lineList = newres.map((item, index) => {
        return {
          value: index, //把下标改成value键名
          // text: item.point_list_id, //把id的键名改成text
          text: item.point_list_id, //把id的键名改成text    测试
        };
      });
      console.log(this.lineList);
      // 进行下拉菜单的赋值
      // this.onetext = this.location.text;
      // 进行下拉菜单的赋值
      // this.twotext = this.location.text;
    },
  },
  created() {
    this.getgino(); //打开页面发发送请求获取数据
  },
};
</script>

<style lang="less" scoped>
.Thirly {
  display: flex;
  width: 100%;
  ::v-deep .van-popup {
    width: 240px;
    height: 500px;
    margin-left: 704px;
    border: none !important;
    .van-button {
      position: fixed;
      left: 25%;
      width: 400px;
      height: 50px;
      border-radius: 20px;
      font-size: 22px;
    }
    .van-dropdown-item__content {
      position: absolute;
      max-height: 100%;
    }
  }
  .van-radio {
    margin-left: 20px;
    height: 60px !important;
  }

  .animation {
    margin: 12% 45%;
  }
  .details {
    position: fixed;
    top: 62px;
    left: 500px;
    width: 70vw;
    height: 584px;
    background-color: #cfcfcf;
    div {
      margin-bottom: 42px;
      font-size: 24px;
    }
    .four {
      margin: 120px auto;
      margin-top: 200px;
      text-align: center;
      .van-button {
        background-color: rgba(230, 179, 26);
        width: 260px;
        height: 80px;
        font-size: 32px;
        line-height: 60px;
        padding-left: 40px;
        color: white;
      }
    }
  }
}
.van-dropdown-menu {
  width: 800px;
  ::v-deep .van-cell {
    margin-left: 45%;
  }
}

.bool {
  height: 40px;
  .van-cell--center {
    width: 700px !important;
    text-align: center;
  }
  .van-cell__title {
    width: 100px !important;
    margin-right: 370px;
  }
}

::v-deep .van-dropdown-menu__item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 200px !important;
  cursor: pointer;
  background-color: skyblue !important;
  height: 20px !important;
}
.van-dropdown-menu {
  position: relative;
  // padding: 0 10px;
  margin-bottom: 20px;
  width: 240px !important;
  .van-icon {
    position: absolute;
    top: 5px;
    left: 20px;
    span {
      width: 80px;
      position: absolute;
      top: -8px;
      line-height: 50px;
      font-size: 16px;
      color: black;
      margin-left: 10px;
    }
  }
}
::v-deep .van-dropdown-menu__bar {
  position: relative;
  display: flex;
  height: 40px;
  background-color: skyblue;
  box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
}
::v-deep .van-dropdown-menu__title::after {
  position: absolute;
  top: 50%;
  right: 60px;
  margin-top: 5px;
  border: 3px solid;
  border-color: transparent transparent #dcdee0 #dcdee0;
  transform: rotate(-45deg);
  opacity: 0.8;
  content: "";
}
.button {
  margin-left: 5px;
  .van-button {
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    width: 65px;
    height: 100px;
    background-color: #3ab9bc;
  }
}
#ads{
  /deep/ .van-checkbox__label{
    font-size: 22px!important;
    color: #fff!important;
  } 
  
}
</style>
